<template>
	<view class="content">
		<view class="topBanner">
			<view class="leftMoney">
				<p class="title">我的收益余额(元)</p>
				<p class="money">{{userInfo.gradeCommission || 0}}</p>
			</view>
			<view class="button"
				v-if="isOpenWithdrawal !== null && isOpenWithdrawal !== undefined && isOpenWithdrawal !== 1"
				@click="goWithdrawal">
				提现
			</view>
		</view>
		<view class="contentBox">
			<p class="date">收益明细</p>
			<view class="detail-section" v-for="(detail, detailIndex) in dataList" :key="detailIndex">
				<view class="left-column">
					<p class="name">{{ detail.remark }}</p>
					<p class="time">{{ detail.creationTime }}</p>
				</view>
				<p class="money"
					:class="{ positive: detail.expenditureOrIncome === 1, negative: detail.expenditureOrIncome !== 1 }">
					<span v-if="detail.expenditureOrIncome === 1">+</span>
					<span v-else>-</span>
					{{ detail.operatingAmount }}
				</p>
			</view>
		</view>
		<view v-if="!dataList.length">
			<image style="margin:10%;" src='../../../static/null/null.png'></image>
		</view>
	</view>
</template>

<script>
	import {
		getJournal
	} from '@/api/money.js';

	import {
		getUserInfo
	} from '@/api/user.js';

	export default {
		data() {
			return {
				userInfo: {},
				dataList: [],
				pageSize: 20,
				pageNumber: 1,
				totalPages: 0,
				isOpenWithdrawal: null
			};
		},
		onLoad() {
			this.getUser()
			this.getList();
		},
		onShow() {
			const data = {}
			getConfig(data).then(res => {
				this.isOpenWithdrawal = res.data.records.isOpenWithdrawal
			})
		},
		methods: {
			//获取用户信息
			getUser() {
				getUserInfo().then(res => {
					this.userInfo = res.data
				});
			},
			getList() {
				const params = {
					currencyType: 1,
					pageSize: this.pageSize,
					pageNumber: this.pageNumber,
				};
				getJournal(params).then(res => {
					if (res.data && res.data.records) {
						this.dataList = [...this.dataList, ...res.data.records];
						this.totalPages = Math.ceil(res.data.total / this.pageSize);
					}
				}).catch(() => {});
			},
			loadMore() {
				this.pageNumber += 1;
				this.getList();
			},
			goWithdrawal() {
				uni.navigateTo({
					url: '/pages/my/withdrawal/index'
				})
			},
		},
		onReachBottom() {
			this.loadMore();
		}
	}
</script>

<style lang="scss">
	@import '@/uni.scss';

	.content {
		min-height: 100vh;
		background-color: #F3F3F3;
		padding: 20rpx;
	}

	.topBanner {
		width: 100%;
		height: 202rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		background: linear-gradient(to bottom, #7AAD5B, #EBF0E3);
		// background-image: url('https://beauty-of-face.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/profitBanner.png');
		// background-size: cover;
		// background-position: center;
		// background-repeat: no-repeat;
		display: flex;

		.leftMoney {
			width: 70%;
			height: 100%;
			margin: 60rpx 40rpx;

			.title {
				font-weight: bold;
				font-size: 28rpx;
				color: #EBF0E3;
				line-height: 34rpx;
			}

			.money {
				font-weight: bold;
				font-size: 50rpx;
				color: #EBF0E3;
				line-height: 34rpx;
				margin-top: 20rpx;
			}
		}

		.button {
			width: 133rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 50rpx;
			font-size: 26rpx;
			background: #f68a1d;
			opacity: 0.8;
			font-weight: bold;
			text-align: center;
			color: #fff;
			margin: 80rpx 40rpx;
		}
	}

	.contentBox {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		.date {
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid $uni-border-color;
		}

		.detail-section {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0rpx;
		}

		.left-column {
			display: flex;
			flex-direction: column;
		}

		.name {
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 5rpx;
		}

		.time {
			font-size: 26rpx;
			color: #999999;
		}

		.money {
			font-size: 32rpx;
			font-weight: bold;
		}

		.positive {
			color: #EC6356;
		}

		.negative {
			color: #000000;
		}
	}

	.loading-more,
	.no-more-data {
		text-align: center;
		margin-top: 20rpx;
		color: #999;
	}
</style>